<template>
  <div>
    <el-card class="search-card">
      <BasicForm
        ref="formData"
        formItemWidth="130px"
        :isScalingBtn="false"
        :formColumns="formItems"
        :dataSource="formData"
        :handleSearchForm="handleQueryForm"
        @getFormData="getFormData"
      />
    </el-card>
    <el-card class="table-card">
      <skus-table
        ref="skusTable"
        showPagination
        :tableHeight="480"
        :defaultMinWidth="100"
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="pagination.total"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
      >
        <div slot="content_context">
          <!-- 按钮操作栏 -->
          <BtnRender :render="renderBtnsBar" />
        </div>
      </skus-table>
    </el-card>
  </div>
</template>
<script>
import BasicForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import BtnRender from '@/components/JSXRender/BtnRender';
import { getBtnsBar } from '@/utils/getBtnsRender';
import { getInitFormData } from '@/utils/getUtils';
import skusPage from '@/mixins/commodity/skusPage';
export default {
  mixins: [skusPage],
  components: {
    BasicForm,
    SkusTable,
    BtnRender
  },
  props: {
    // 表格头部按钮栏集合
    tableHeaderBars: {
      type: Array,
      default: () => []
    },
    formItems: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    getTableDataService: {
      type: Function,
      default: () => {}
    }
  },
  data () {
    return {
      formData: getInitFormData(this.formItems),
      tableInfo: {
        list: [],
        columns: [...this.tableColumns],
        loading: false
      },
      pageSizes: [10, 100, 1000]
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    // 渲染按钮操作栏
    renderBtnsBar (h) {
      const btnsBar = [
        ...this.tableHeaderBars,
        { label: '返回', method: this.handleGoBack, size: 'mini', type: 'default' }
      ]
      return getBtnsBar(h, btnsBar, null, 'start')
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'productTagManageList' })
    },
    // 获取表格数据
    async getTableData () {
      const data = { ...this.formData, ...this.paginationParams }
      const loadingFn = state => { this.tableInfo.loading = state }
      const res = await this.getTableDataService(data, loadingFn)
      res?.retData && this.setTableInfo(res.retData)
    },
    // 设置表格信息
    setTableInfo (retData) {
      this.tableInfo.list = retData.results ?? []
      this.setTotalNum(retData.totalNum)
    }
  }
}
</script>
